<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=0.5, maximum-scale=0.5,minimum-scale=0.5,user-scalable=0" />
    <title>音阶查询</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/chored.css">
    <link rel="stylesheet" href="./css/todoList.css">
    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
    <style>
        .interval-btn-start {
            background-color: red;
        }

        .plan-list {
            margin-top: 20px;
            height: calc(100vh - 560px);
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <audio id="piano-audio"></audio>
    <div>
        <div class="piano-box">
            <div class="piano-main">
                <div class="piano-left">
                    <div class="tool-box">
                        <!--select下拉菜单：调式-->
                        <div class="select">
                            <label for="">调式：</label>
                            <select name="" id="select-tuning">
                                <!-- <option value="0">C调</option> -->
                            </select>
                        </div>
                    </div>
                    <div class="interval">
                        <div class="interval-btn">
                            <button class="interval-btn-start">开始计算</button>
                            <button class="interval-btn-reset">重新计算</button>
                            <button class="interval-btn-stop">停止计算</button>
                            <button class="show-btn">显示和弦名</button>
                            <button class="drop-btn">降</button>
                            <button class="liter-btn">升</button>
                        </div>
                        <h2>音程计算</h2>
                        <div class="interval-tips">请点击底部钢琴键盘↓</div>
                        <div class="interval-list">
                            <!-- <div class="interval-sound">G1</div>
                            <div class="interval-name">大三度</div>
                            <div class="interval-sound">G3</div> -->
                        </div>
                    </div>
                </div>
                <div class="piano-right">
                    <div class="container">
                        <div class="calendar">
                                    <span id="prevMonth"><span class="icon iconfont icon-zuojiantoushixinxiao" style="font-size: 30px; vertical-align: middle; color: #bbb;"></span></span>
                                    <span id="currentMonthYear" style="vertical-align: middle;"></span>
                                    <span id="nextMonth"><span class="icon iconfont icon-zuojiantoushixinxiao" style="font-size: 30px; vertical-align: middle; transform: rotate(180deg); display: inline-block;color: #bbb;"></span></span>
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>日</th>
                                                <th>一</th>
                                                <th>二</th>
                                                <th>三</th>
                                                <th>四</th>
                                                <th>五</th>
                                                <th>六</th>
                                            </tr>
                                        </thead>
                                        <tbody id="calendarBody"></tbody>
                                    </table>
                        </div>
                        <div class="plan">
                            <!--深蓝到浅蓝背景过渡的进度条，进度条的底色是灰色-->
                            <h3>任务 <span style="float: right;"><span id="completedPlans"></span>/<span
                                        id="totalPlans"></span></span>
                            </h3>
                            <div id="progress-bar">
                                <div id="progress-bar-inner"></div>
                            </div>
                            <!-- <form id="planForm"> -->
                            <!-- <input type="text" id="planTitle" placeholder="标题">
                                <textarea id="planDescription" placeholder="描述"></textarea> -->
                            <button class="add-plan"><span class="icon iconfont icon-add" style="font-size: 30px;"></span></button>
                            <!-- </form> -->
                            <div class="plan-list" id="planList"></div>
                            <div class="data-no"><img src="./images/noDataBg.png" style="width: 200px;"><span style="display: block;">暂无计划</span></div>
                        </div>
                    </div>
                </div>
            </div>
             <!--电脑键盘键位映射-->
             <div class="keyboard-map">
                
             </div>
            <div class="piano-bottom">
                <div class="piano"></div>
                <ul class="piano-group"></ul>
            </div>
        </div>

        <!--计划弹窗-->
        <div class="popup-container">
            <div class="popup">
                <div class="popup-header">
                    <h2>计划</h2>
                    <span class="close">&times;</span>
                </div>
                <div class="popup-body">
                    <form id="planForm">
                        <input type="text" id="planTitle" placeholder="标题">
                        <textarea id="planDescription" placeholder="描述" style="height: 100px;resize:none"></textarea>
                        <button class="save-plan">保存</button>
                    </form>
                </div>
            </div>
        </div>


    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/todoList.js"></script>
    <script src="./js/chord.js"></script>
    <script src="./js/public.js"></script>
</body>

</html>